<template>
  <div class="template-content">
    <SearchHeader v-model="queryParam.where.keyword" :can-add="canModify" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
<!--        <Col span="2"><Button type="success" shape="circle" icon="ios-add" @click="add">新增</Button></Col>-->
        <Col span="5"><Input :placeholder="$t('code')" v-model="queryParam.where.code"></Input> </Col>
        <Col span="5"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>
        <Col span="5"><OrganizationTree v-model="queryParam.where.orgId" ref="srhOrgSelect" width="200px"></OrganizationTree> </Col>
<!--        <Col span="1"><Button type="primary" icon="ios-search" @click="getTable">查询</Button></Col>-->
      </Row>
    </SearchHeader>

    <Card>
      <Table border :columns="columns" :data="tableData" :loading="loading">
        <template slot-scope="{ row, index }" slot="online">
          <span v-if="row.online" style="color: green" >{{$t('online')}}</span>
          <span v-if="!row.online" >{{$t('offline')}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('delete')" icon="md-trash" @click="remove(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="state">
          <span v-if="row.state==1" style="color: green" >{{$t('device_status_1')}}</span>
          <span v-if="row.state==2" style="color: #ed4014" >{{$t('device_status_2')}}</span>
          <span v-if="row.state==3" style="color: #BB5E26" >{{$t('device_status_3')}}</span>
        </template>
<!--        <template slot-scope="{ row, index }" slot="online">
          <span v-if="row.online" style="color: green" >在线</span>
          <span v-if="!row.online" style="color: red" >离线</span>
        </template>-->
      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="getData"></TopnavPage>
    </Card>
    <StorageSiteEdit ref="storageSiteEdit"></StorageSiteEdit>
  </div>
</template>
<script>
import OrganizationTree from '@/components/topnav/OrganizationTree';
import {queryPage,removeSite} from '@/api/site';
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import StorageSiteEdit from "@/view/Device/StorageSiteEdit";
import {apiResult, clone} from '@/libs/util'
import AuthCheck from "@/api/AuthCheck";
export default {
  name: "storageSite",
  components:{OrganizationTree,TopnavPage,SearchHeader,StorageSiteEdit},
  computed:{
    columns(){
      return [{title: this.$t('operate'), key: 'action', width: 150, slot: 'action', align: 'center'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 175},
        {title: this.$t('name'), key: 'name', sortable: true, width: 200},
        {title: 'IP', key: 'host', sortable: true, width: 150},
        {title: this.$t('play_url'), key: 'url', sortable: true, width: 150},
        {title: this.$t('organization'), key: 'orgName', sortable: true, width: 150},
        {title: this.$t('status'), key: 'online', sortable: true, width: 100, slot: 'state'},
        {title: this.$t('online'), key: 'online', sortable: true, width: 100, slot: 'online'},
        {title: this.$t('ftp_port'), key: 'ftpPort', sortable: true, width: 150},
        {title: this.$t('ftp_user'), key: 'ftpUser', sortable: true, width: 150},
        {title: this.$t('ftp_password'), key: 'ftpPassword', sortable: true, width: 200},
        {title: this.$t('storage_capacity_T'), key: 'capacity', sortable: true, width: 150}]
    }
  },
  data(){
    return {
      canModify: false,
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {keyword: null, code: null, name: null, type: 2, orgId: null, host: null},
        init: ()=>{
          this.queryParam.where.keyword = null;
          this.queryParam.where.code = null;
          this.queryParam.where.name = null;
          this.queryParam.where.type = 2;
          this.queryParam.where.orgId = null;
          this.queryParam.where.host = null;
        }
      },
      loading:false,
      tableData: [],
    }
  },
  methods:{
    getData(){
      /** 生成查询条件 */
      this.queryParam.where.type=2;
      this.loading = true;
      queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = [];
        this.loading = false;
        apiResult(res.data,false,result=>{
           this.queryParam.page.total = result.data.total;
           this.tableData = result.data.records;
        });
      })
    },
    add() {
      let row={
        id: null,
        code: null,
        name: null,
        type: 2, //采集站
        state: 1,
        online:true,
        orgId: null,
        host: null,
        port: 8080,
        url: null,
        manufacture: null,
        softVersion: null,
        orgName: null,
        ftpPort:null,
        ftpUser:null,
        ftpPassword:null,
        capacity:0.0,
      }
      this.$refs.storageSiteEdit.openDialog("ADD",row, this.getData);
    },
    edit(row) {
      this.$refs.storageSiteEdit.openDialog("EDIT",clone(row), this.getData);
    },
    view(row) {
      this.$refs.storageSiteEdit.openDialog("VIEW",clone(row), this.getData);
    },
    remove(row){
      this.$Modal.confirm({
        title: this.$t('delete_confirm'),
        content: this.$t('delete_make_sure'),
        onOk: () => {
          removeSite({id:row.id}).then(res=>{
              apiResult(res.data,true,result=>{
                this.getData();
              });
          });
        },
        onCancel: () => {}
      });
    },
  },
  mounted(){
    this.canModify = new AuthCheck().storageSvrRegEdit();
    this.getData();
  }
}
</script>
<style lang="less">
@import ".././template";
</style>
